<template>
  <div v-loading="showLoading">
    <div>
      <div class="fx">
        <div class="block f5bg">
          <div class="block-left">失信被执行条数：</div>
          <div
            class="block-right"
            v-htmlNo="{
              action: EnterpriseCasesInfo.enterpriseDishonestSum,
              unit: '次'
            }"
          ></div>
        </div>
        <div class="block f5bg">
          <div class="block-left">执行条数：</div>
          <div
            class="block-right"
            v-htmlNo="{
              action: EnterpriseCasesInfo.executedPersonSum,
              unit: '条'
            }"
          ></div>
        </div>
      </div>
      <div class="fx">
        <div class="block">
          <div class="block-left">法院工公告条数：</div>
          <div
            class="block-right"
            v-htmlNo="{
              action: EnterpriseCasesInfo.courtNoticeSum,
              unit: '条'
            }"
          ></div>
        </div>
        <div class="block">
          <div class="block-left">判决文书条数：</div>
          <div
            class="block-right"
            v-htmlNo="{
              action: EnterpriseCasesInfo.enterpriseCaseSum,
              unit: '条'
            }"
          ></div>
        </div>
      </div>
      <div class="fx">
        <div class="block f5bg">
          <div class="block-left">总涉案金额：</div>
          <div
            class="block-right"
            v-htmlNo="{ action: EnterpriseCasesInfo.subjectAmount, unit: '元' }"
          ></div>
        </div>
        <div class="block f5bg">
          <div class="block-left">近6个月是否有法人变更：</div>
          <div class="block-right">
            {{ EnterpriseCasesInfo.changeStatus ? "是" : "否" }}
          </div>
        </div>
      </div>
    </div>

    <div class="canpanyer-box">
      <div class="title-msg">
        工商变更信息
      </div>
      <div style="margin-top: 20px">
        <el-table :data="EnterpriseCasesInfo.enterpriseChangeList" border>
          <el-table-column align="center" prop="name" label="变更项目" />
          <el-table-column align="center" prop="changeDate" label="变更日期" />
          <el-table-column
            align="center"
            prop="beforeContent"
            label="变更前内容"
          />
          <el-table-column
            align="center"
            prop="affterContent"
            label="变更后内容"
          />
        </el-table>
      </div>
      <div class="title-msg">
        判决文书
      </div>
      <div style="margin-top: 20px">
        <el-table :data="EnterpriseCasesInfo.qccEnterpriseCaseList" border>
          <el-table-column align="center" prop="name" label="文书标题" />
          <el-table-column align="center" prop="roleTypes" label="案件身份">
          </el-table-column>
          <el-table-column align="center" prop="result" label="裁决结果" />
          <el-table-column align="center" prop="judgeDate" label="案件日期" />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { getEnterpriseCasesInfo } from "@/api/customer";
export default {
  name: "businessJudicialInformation",
  props: {
    detailInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      EnterpriseCasesInfo: {},
      showLoading: false
    };
  },
  created() {
    this.getEnterpriseCasesInfo(this.detailInfo.creditCode);
  },
  methods: {
    getEnterpriseCasesInfo(id) {
      this.showLoading = true;
      getEnterpriseCasesInfo(id)
        .then(res => {
          this.EnterpriseCasesInfo = res.data;
          this.showLoading = false;
        })
        .finally(() => {
          this.showLoading = false;
        });
    }
  }
};
</script>

<style scoped lang="scss">
.f5bg {
  background: #f5f5f5;
}
.fx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .block {
    width: 48%;
    display: flex;
    align-items: center;
    max-height: 60px;
    padding: 18px 0;

    //line-height: 56px;
    .block-left {
      display: inline-block;
      //display: flex;
      text-align: right;
      width: 38%;
      white-space: nowrap;
      color: #999;
    }
    .block-right {
      display: inline-block;
      //display: flex;
      line-height: 18px;
      color: #222;
      width: 60%;
    }
  }
}
.title-msg {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 500;
  color: #222222;
}
</style>
